<!--
 * @Author: Wangtao
 * @Date: 2021-01-05 14:54:54
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-28 17:23:49
-->
<template>
  <div class="setMessage">
    <div class="oprate">
      <!-- <el-dropdown :hide-on-click="false" v-if="placeholderObj.isShow">
        <span class="el-dropdown-link">
          占位符<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, index) in placeholderObj.options" :key="index">{{item}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <span class="el-dropdown-link" @click="editBtnClick">
        {{ isOrdinary | getEditBtnText }}
      </span>
    </div>
    <div class="edit">
      <el-input
        type="textarea"
        v-show="isOrdinary"
        :placeholder="placeholder"
        v-model="ordinaryText"
        maxlength="50"
        show-word-limit
      >
      </el-input>
      <div id="editor" v-show="!isOrdinary"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import WangEditor from 'wangeditor'
interface ValueObj {
  type?: 'welcomeMessage' | 'overtime' | 'excess',
  content: string,
  textType: 'ordinary' | 'rich'
}
interface PlaceholderArr {
  props: string
}

interface PlaceholderObj {
  isShow: boolean,
  options: PlaceholderArr
}
@Component({
  name: 'SetMessage',
  components: {},
  filters: {
    getEditBtnText (isOrdinary: boolean): string {
      return isOrdinary ? '高级编辑' : '普通文本'
    }
  }
})
export default class extends Vue {
  @Prop() private value: ValueObj | undefined
  @Prop() private placeholder: string | undefined
  @Prop() private placeholderObj!: PlaceholderObj | undefined
  @Prop({
    default: () => [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      // 'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'image',
      'video',
      'table',
      // 'code',
      'splitLine',
      'undo',
      'redo']
  }) private menus?: any

  private editor: any
  // 普通文本
  private ordinaryText: string = ''
  // 富文本
  private richText: string = ''
  // 是否普通文本
  private isOrdinary: boolean = true
  private mounted () {
    this.createEdit()
  }

  private createEdit (): void {
    const editor = new WangEditor('#editor')
    editor.config.menus = this.menus
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      const reg = /<img.*?src=["|']?(.*?)["|']?\s.*?>/gi
      if (newHtml.match(reg) && newHtml.match(reg).length > 0) {
        newHtml.match(reg).forEach((index, item) => {
          const execArr: any = reg.exec(newHtml)
          const replaceText = '<img src="' + execArr[1] + '" style="max-width:100%;">'
          newHtml = newHtml.replace(execArr[0], replaceText)
        })
      }
      this.richText = newHtml
    }
    editor.config.zIndex = 1500
    // 是否全屏
    editor.config.showFullScreen = false
    // 高度
    editor.config.height = 100
    // 表情
    editor.config.emotions = [
      {
        title: 'emoji', // tab 的标题
        type: 'emoji', // 'emoji' / 'image'
        // emoji 表情，content 是一个数组即可
        content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/)
      }
    ]
    // 创建编辑器
    editor.create()
    this.editor = editor
    if (!this.isOrdinary) {
      this.editor.txt.html(this.richText)
    }
  }

  private editBtnClick (): void {
    this.isOrdinary = !this.isOrdinary
  }

  public refresh (): void {
    const returnObj: ValueObj = {
      textType: this.isOrdinary ? 'ordinary' : 'rich',
      type: (this.value as ValueObj).type,
      content: this.isOrdinary ? this.ordinaryText : this.richText
    }
    this.$emit('input', returnObj)
  }

  @Watch('value', { immediate: true })
  private valueChange (newObj: ValueObj): void {
    this.ordinaryText = ''
    this.richText = ''
    this.isOrdinary = newObj.textType === 'ordinary'
    if (this.editor) {
      this.editor.txt.clear()
    }
    if (this.isOrdinary) {
      this.ordinaryText = newObj.content
    } else {
      this.richText = newObj.content
      if (this.editor) {
        this.editor.txt.html(newObj.content)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
$oprate-color = #008BEE
$oprate-background = #E5F3FD
.setMessage >>>
  .el-dropdown-link
    color $oprate-color
    background $oprate-background
    font-size 12px
    padding 3px 6px 3px
    border-radius 5px
    margin-right 10px
    cursor pointer
.edit
  margin-top 20px
  >>>
    .w-e-toolbar
      background #f7f9fb !important
      border-radius 4px 4px 0 0
      align-items center
      .w-e-menu
        margin 5px 8px 5px
        height auto
        width auto
      .w-e-text
        padding 0 0 4px 4px
</style>
